<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>分类管理</title>
</head>
<body>
<div layout:fragment="content">
<link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css"/>
<link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal.css"/>
<link th:href="@{/plugins/zTree/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet" href="plugins/zTree/css/zTreeStyle/zTreeStyle.css"/>
<script th:src="@{/plugins/zTree/js/jquery.ztree.core-3.5.js}" src="plugins/zTree/js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
<script th:inline="javascript">	
function check(id){
	if($('#categoryId').val()){
		if(id == $('#categoryId').val()){
			alert('不能选择自己');
			return ;
		}
		
		$.ajax({
			url:'/goods/category/check',
			data:{id:$('#categoryId').val(),selectedId:id},
			method:'post',
			success:function(data){
				if(data){
					alert('不能选择自己的子类！');
					return ;
				}else{
		    		$("#parentId option").each(function() { this.selected = (this.value == id); });
		    		$("#parentId").change();
		    		$("#tree_modal").modal('hide');				
				}
			}
		});		
	}else{
		$("#parentId option").each(function() { this.selected = (this.value == id); });
		$("#parentId").change();
		$("#tree_modal").modal('hide');		
	}
} 


$(document).ready(function(){
	/* 筛选属性判断  start */
	var count = 0;
	$(".SINGLE").click(function(e){
		if($(this).parent().hasClass("checked")){
			$(this).attr("checked",false);
			count--;
		}else{
			$(this).attr("checked",true);
			count++;
		}
		if(count>2){
		  alert("单选属性最多只能选择两个！");
		  $(this).attr("checked",false);
		  count=2;
		  e.preventdefault();
		}
	});
	/* 筛选属性判断  end */
	
	$('#treebutton').html($("#parentId").find("option:selected").text() + '<i class="fa fa-angle-down"></i>');
	
	$("#parentId").change(function(){$('#treebutton').html($("#parentId").find("option:selected").text() + '<i class="fa fa-angle-down"></i>'); });
	
	$("#form_goodsCategoryEdit").validate({
	    rules:{
	    	name:{  //分类名称长度不能超过 100个字符
	            required:true,
	            maxlength:100
	        },
	        displayOrder:{  //整数  最大为254，最小为0   
	        	required:true,
	            digits:true,  
	            range:[0,254]     
	        },
	        
	        displayed:"required",
	        navigation:"required",
	        keywords:{    //SEO-关键字  长度不能超过 100个字符
	         
	            maxlength:100
	        },
	        description:{    //SEO-分类描述长度不能超过 300个字符
	        
	            maxlength:300   
	        },
	        title:{    //SEO-标题长度不能超过 100个字符
	        
	            maxlength:100   
	        },
	    },
	    messages:{
	    	name:{
	            required:"请输入分类名称",
	            maxlength:"最大不能超过100个字符"
	        },
	        sort_order:{
	            required:"请输入分类排序",
	            maxlength:"最大值不能超过254"
	        },
	        displayed:"是否显示该分类，请选择其一",
	        navigation:"是否显示在导航栏",
	        keywords:{
	            
	            maxlength:"SEO-关键字最大不能超过100个字符"
	        },
	       
	        description:{
	            maxlength:"SEO-分类描述最大不能超过300个字符"
	        },
	        title:{
	            maxlength:"SEO-标题最大不能超过100个字符"
	        }

	    }
	});

})	
</script>
	
	<!--Modal begin-->
	<div id="tree_modal" class="modal fade">
		<div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button></div>
	    <div class="modal-body">
			<div class="row">

			</div>
		</div><!--Modal body-->
		<div class="modal-footer">
			<a href="#" class="btn" data-dismiss="modal" >关闭</a>
		</div><!--Modal footer-->
	</div>
	<!--Modal end-->

	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/goods/category/index/}" id="sample_editable_1_new" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
	 
	<div class="row">
		<div class="col-md-12">
			<div class="form">
				<form role="form" id="form_goodsCategoryEdit" th:action="@{/goods/category/save}" th:object="${category}" method="post" class="form-horizontal">
					<h4 class="form-section">分类基本信息管理</h4>
					<input type="hidden" id="categoryId" th:field="*{id}" />
					<div class="form-body">
						
						<div class="form-group" th:class="${#fields.hasErrors('name')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">分类名称<span class="required" aria-required="true">* </span></label>							
							<div class="col-md-4">
								<input type="text" class="form-control"  id="name" name="name" placeholder="分类名称" th:field="*{name}"/>
								<span class="help-block" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">分类名称不能为空</span>
							</div>
						</div>
 		  				<div class="form-group" th:class="${#fields.hasErrors('parentId')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">上级分类<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
							
					            <select th:field="*{parentId}" th:remove="all-but-first" class="form-control" style="display:none">
					                <option th:each="data : ${cateParents}"
					                        th:value="${data.id}" th:text="${data.name}"  style="display:none">女装</option>
					                <option>Another payment method</option>						                
					            </select>

									
								<button id="treebutton" class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
									分类 <i class="fa fa-angle-down"></i>
								</button>
								<div class="dropdown-menu dropdown-content input-large">
									<div id="category_tree" role="menu"></div>
								</div>

								
					            <span class="help-block" th:if="${#fields.hasErrors('parentId')}" th:errors="*{parentId}">顶级分类不可以修改</span>
										
							</div>
						</div>
						<div class="form-group" th:class="${#fields.hasErrors('displayOrder')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">显示顺序<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<input type="text"  id="displayOrder" name="displayOrder" class="form-control" placeholder="显示顺序" th:field="*{displayOrder}" />
								<span class="help-block" th:if="${#fields.hasErrors('displayOrder')}" th:errors="*{displayOrder}">分类名称不能为空</span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">是否显示<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<div class="radio-list">
									<label class="radio-inline"><span><input type="radio" name="isShow"  id="optionsRadios4" value="1"  checked="checked"  th:field="*{displayed}" /></span> 是</label>
									<label class="radio-inline"><span><input type="radio" name="isShow" id="optionsRadios5" value="0"    th:field="*{displayed}" /></span> 否</label>
								</div>						
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">是否显示在导航栏<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<div class="radio-list">
									<label class="radio-inline"><span><input type="radio" name="isShow"  id="optionsRadios4" value="1" checked="checked" th:field="*{navigation}" /></span> 是</label>
									<label class="radio-inline"><span><input type="radio" name="isShow" id="optionsRadios5" value="0" th:field="*{navigation}" /></span> 否</label>
								</div>						
							</div>
						</div>
					
						<div class="form-group">
 						<label class="control-label col-md-3">筛选属性</label>
							<div class="col-md-9">
								 <div class="checkbox-list" >
										<label class="checkbox-inline" th:each="attributes : ${attributeList}" > 
										   <span>
										      <input  type="checkbox" th:field="*{attributeIdList}" name="attributeIds" th:value="${attributes.id}"  th:text="${attributes.name} + '('+ ${attributes.selectType.description +')'}" id="attributeID" th:class="${attributes.selectType}"/>
										   </span>
									    </label>
								  </div>
							</div>
						</div>
					
					
						<div class="form-group">
 						<label class="control-label col-md-3">SEO-关键字 <span class="required" aria-required="true"></span></label>
							<div class="col-md-4">
								<input type="text" class="form-control" name="keywords" id="keywords" placeholder=" " th:field="*{keywords}" />
								<span class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">SEO-分类描述<span class="required" aria-required="true"> </span></label>
							<div class="col-md-4">
								<input type="text" class="form-control" name="description" id="description" placeholder=" " th:field="*{description}" />
								<span class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">SEO-标题<span class="required" aria-required="true"></span></label>
							<div class="col-md-4">
								<input type="text" name="title" id="title" class="form-control" placeholder=" " th:field="*{title}" />
								<span class="help-block"></span>
							</div>
						</div>
						 
						
					</div>
						
					<div class="form-actions fluid">
						<div class="col-md-offset-3 col-md-9">
							<button type="submit" name="btn_submit" id="btn_submit" class="btn blue">提交</button>
 						</div>
					</div>
				</form>		
			</div>
		</div>
	</div>
	<script th:src="@{/plugins/jstree/dist/jstree.min.js}" src="plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
	<script th:inline="javascript">
	/*<![CDATA[*/
	
	    $('#category_tree').jstree({
            "core" : {
                'data' : {'url' : function (node) {return '/tree/category';}}
            }
        });
	    $('#category_tree').on('select_node.jstree', function(e,data) { 
	    	check(data.node.id);
	    });
	    var result;
	    function getCategoryById(id,categories){   	
	    	$(categories).each(function() { 
	    		if(this.id == id)result = this; 
	    		console.log(this.id);
		    	if(result){
		    		console.log('find it' + result);
		    		return result;
		    	}else{
		    		console.log('not find ,try sub cat' + result);
		    		result = getCategoryById(id,this.children);
		    		return result;
		    	}
	    	});
			return result;
	    }
	    function check2(checkId){
	    	var currentId = $("#parentId").val();
			if($("#id").val() == 0){
				return true;
			}
	    	var thisCategory = getCategoryById(checkId,$('#category_tree').jstree().get_json()[0].children);
	    	var thisSubCategories = [];
	    	//console.log(thisCategory);
	    	addSubCategoriesToArray(thisCategory,thisSubCategories);
	    	//console.log(thisSubCategories);
	    	
	    	var checkPassed = true;
	    	$(thisSubCategories).each(function() {
	    		if(currentId == this){
	    			alert("不能选择自身子类");
	    			checkPassed = false;
	    		}
	    	});
	    	
	    	return checkPassed;
	    }
	    function addSubCategoriesToArray(category,array){
	    	//console.log(category.children);
	    	if(category.children){
		    	$(category.children).each(function() {
		    		console.log(this);
		    		array[array.length] = this.id;	 
		    		console.log(this.children);   		
		    		if(this.children)addSubCategoriesToArray(this.children,array);
		    	});
	    	}
	    }
	    

	    
/* $(".aa").click(function(){	alert(111);
	$("input[type='checkbox'][name='attributeIdList']").each(function(){
	   if($(this).attr("checked"))
	    {
		   var single = Array{};
		   if(single.size>=2){
			  alert("单选属性只能选择俩个！"); 
		   }else{
			   if($(this).attr("value")==1){
				   
				   single.push($(this).attr("value"));
			   }
		   }		   	       
	    }	  
	});
}); */
	    
	    
	    
	/*]]>*/
	</script>		
</div>	
 
</body>
</html>